<template>
  <div class="customer-manager wap">
    <x-header v-if="!this.$fromApp(this)" :left-options="{backText: ''}"><span>客户管理</span>
      <div class="overwrite-title-right" slot="right" @click="goCategory">分类管理</div>
    </x-header>
    <div class="pop-sort display-flex align-items-center justify-content-flex-center">

      <div @click="showSortPop">
        <span>{{currentLableObj.name}}</span>
        <img class="drop-down" src="../../assets/img/customer/drop_dowm.png" alt="">
      </div>

      <div style="position: absolute;right: .4rem">共 <span
        style="color: #FF9800;font-size: .28rem">{{customeNum}}</span>个客户
      </div>
    </div>

    <div class="main">
      <scroller
        ref="customeManageScroll"
        :noDataText="this.$noData(customerList)"
        :on-refresh="refresh"
        :on-infinite="infinite">
        <customerSearchItem :list="customerList"></customerSearchItem>
        <!--<no-data v-show="loadOk" @refreshData="refresh(0)" :list="customerList"></no-data>-->
        <div v-show="loadOk" v-if="customerList.length==0" style="text-align: center;color:#999;margin-top: .2rem;">
          暂无客户
        </div>
      </scroller>
    </div>


    <div class="pop-sort-content" v-if="showSort" @click.stop="closeSort">
      <ul class="content">
        <li @click.stop="closeDialog(item)" v-for="(item,index) in lableArr" :key="index"
            class="vux-1px-b display-flex align-items-center justify-content-flex-justify">
          <span :class="selectIndex==item.id?'selectText':''">{{item.name}}</span>
          <img v-if="selectIndex==item.id" src="../../assets/img/order/select.png" alt="">
        </li>
      </ul>
    </div>

  </div>
</template>
<script type="text/ecmascript-6">
  import customerSearchItem from '../../components/customer-manager-search-item.vue'

  export default {
    components: {
      customerSearchItem
    },
    data() {
      return {
        selectIndex: -1,
        showSort: false,
        page: 1,
        customerList: [],
        hasNext: true,
        from: true,
        test: [
          {
            obj: {
              name: "aaa"
            }
          }
        ],
        token: "",
        loadOk: false,
        customeNum: 0,
        customerId: '',
        lableArr: [],
        currentLableObj: {id: -1, name: "全部标签"},
        temStr: ""
      }
    },
    created() {
      this.token = this.$storage.get("token");
      // this.initData(0);
      this.getLableTip();
    },
    mounted() {
      window['androidCallJs'] = this.androidCallJs;
    },
    methods: {
      androidCallJs(val) {
        val = decodeURIComponent(val.replace(/\+/g, '%20'));
        try {
          let obj = JSON.parse(val);
          if (obj.code == 1017) {
            let payWay = obj.payWay;//付款方式处理
            if (payWay) {
              for (let i = 0; i < this.customerList.length; i++) {
                if (this.customerList[i].customerId == obj.customerId) {
                    this.customerList[i].payWay=payWay;
                  this.$set(this.customerList, i, this.customerList[i]);
                    break;
                }
              }
            }


            let buyerId = obj.buyerId;
            if (buyerId > 0) {
              this.getLableTip();

              if(obj.deleteItem){
                for (let i = 0; i < this.customerList.length; i++) {
                    if(this.customerList[i].customerTips&&this.customerList[i].customerTips.length>0){
                      for (let j = 0; j < this.customerList[i].customerTips.length; j++) {
                              if(this.customerList[i].customerTips[j].name==obj.deleteItem.name){
                                console.log("=====id",this.customerList[i].customerTips[j].id)
                                this.customerList[i].customerTips.splice(j, 1);
                                break;
                              }
                      }
                    }
                }
                console.log("====",this.customerList);
              }else{
                for (let i = 0; i < this.customerList.length; i++) {
                  if (this.customerList[i].customerId == buyerId) {
                    this.customerList[i].customerTips = obj.LableList;
                    this.$set(this.customerList, i, this.customerList[i]);
                    break;
                  }
                }
              }
            }
          } else {

          }
        } catch (e) {
        }
      },
      getLableTip(id) {
        this.$ajax.get("customer/tip/list", (res) => {
          console.log("====label", res);
          if (res.code == 200) {
            if (id) {

            } else {
              //下拉筛选标签
              this.lableArr = res.data;
              this.lableArr.unshift({id: -1, name: '全部标签'})
            }
          } else {
            this.$vux.toast.text(res.msg, 'center');
          }
        }, {});//不传id表示获取卖家所有的标签
      },
      showSortPop() {
        this.showSort = true;
      },
      closeSort() {
        this.showSort = false;
      },
      closeDialog(item) {
        this.selectIndex = item.id;
        this.showSort = false;
        this.currentLableObj.name = item.name;
        this.currentLableObj.id = item.id;
        this.currentLableObj = Object.assign({}, this.currentLableObj);
        this.refresh(0);
      },
      initData(type) {
        let obj = {pageNo: this.page, pageSize: this.$rows};
        if (this.currentLableObj.id != -1) {
          obj.customerTipId = this.currentLableObj.id;
        }
        this.$ajax.get("customer/list", (res) => {
          console.log("=======type", type, res)
          if (res.code == 200) {
            this.customeNum = res.data.customerCount
            if (res.data && res.data.list) {
              this.customerList = this.page == 1 ? res.data.list : this.customerList.concat(res.data.list);
              this.page++
            }
            if (this.$refs.customeManageScroll && type == 0) {
              setTimeout(() => {
                this.$refs.customeManageScroll.finishPullToRefresh();
                this.$refs.customeManageScroll.finishInfinite(true);
              }, 100)
            }
            if (!res.data || res.data.list < this.$rows) {
              this.hasNext = false;
              if (this.$refs.customeManageScroll) {
                this.$refs.customeManageScroll.finishInfinite(true);
              }
            } else {
              this.hasNext = true;
              this.$refs.customeManageScroll && this.$refs.customeManageScroll.finishInfinite(false);
            }
          } else {
            this.hasNext = false;
            this.$vux.toast.text(res.msg, 'center');
            this.$refs.customeManageScroll && this.$refs.scroll.finishPullToRefresh();
            this.$refs.customeManageScroll && this.$refs.customeManageScroll.finishInfinite(false);
          }
          this.loadOk = true;
        }, obj);

      },
      refresh() {
        console.log("refresh")
        this.hasNext = true;
        this.page = 1;
        this.initData(0);
      },
      infinite() {
        console.log("infinite")
        if (this.hasNext) {
          this.initData(1);
        } else {
          this.$refs.scroll && this.$refs.scroll.finishInfinite(true)
        }
      },

      goCategory() {
        if (this.$fromApp(this)) {
          this.$callJava({url: this.$webUrl + "category/mamager?from=app" + "&Authorization=" + this.$storage.get("token")})
        } else {
          this.$router.push({path: '/category/mamager'})
        }
      },
    }
  }
</script>

<style lang="less" type="text/less" scoped>
  .customer-manager {
    background: #f5f5f5;
    position: relative;
    .overwrite-title-right {
      color: #fff;
      font-size: 0.32rem;
    }
    .pop-sort {
      position: relative;
      height: .88rem;
      margin-bottom: .2rem;
      background: #fff;
      .drop-down {
        margin-left: .18rem;
        width: .14rem;
        height: .14rem;
      }
    }
    .pop-sort-content {
      width: 100%;
      background: rgba(0, 0, 0, 0.2);
      position: absolute;
      z-index: 9999;
      top: .8rem;
      bottom: 0;
      .content {
        width: 100%;
        background: #fff;
        height: 50%;
        overflow: scroll;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        li {
          padding: 0 .4rem;
          min-height: .9rem;
          img {
            width: .3rem;
            height: .3rem;
          }
        }
      }
      .selectText {
        color: #527DD9;
      }
    }

  }
</style>
